<div>
  <div class="example-accordion-grid">
    <div class="example-accordion-container">
      <h4>Single expansion - Able to expand and collapse accordion panels.</h4>
      <cdk-accordion-single-expansion-example></cdk-accordion-single-expansion-example>
    </div>

    <div class="example-accordion-container">
      <h4>Multi expansion - Able to expand and collapse multiple accordion panels</h4>
      <cdk-accordion-multi-expansion-example></cdk-accordion-multi-expansion-example>
    </div>

    <div class="example-accordion-container">
      <h4>
        Disabled Accordions are Focusable - Able to navigate to a disabled accordion. Disabled
        accordions are not expandable.
      </h4>
      <cdk-accordion-disabled-focusable-example></cdk-accordion-disabled-focusable-example>
    </div>

    <div class="example-accordion-container">
      <h4>
        Disabled Accordions are Skipped - Disabled accordions are skipped over and not expandable.
      </h4>
      <cdk-accordion-disabled-skipped-example></cdk-accordion-disabled-skipped-example>
    </div>

    <div class="example-accordion-container">
      <h4>Disabled - Focus should land on the accordion group instead of an accordion trigger.</h4>
      <cdk-accordion-disabled-example></cdk-accordion-disabled-example>
    </div>
  </div>

  <div class="example-configurable-accordion-container">
    <h4>Configurable Accordion</h4>
    <cdk-accordion-configurable-example></cdk-accordion-configurable-example>
  </div>
</div>
